<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>表单验证</title>
	<script type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" href="bootstrap.css">
    <style type="text/css">
    .checkbox label{margin-right: 15px}
    </style>
</head>
<body>
	<div class="container">
		<div class="row">
			<h1 class="page-header text-center">表单验证</h1>
<form class="form-horizontal" action="test.php" method="post" id="form">
	<div class="form-group">
	    <label for="username" class="col-sm-2 control-label">用户名</label>
	    <div class="col-sm-10">
	      <input type="text" class="form-control" id="username" name="username" placeholder="6~12位数字字母下划线">
	    </div>
	</div>
  <div class="form-group">
    <label for="email" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" name="email" placeholder="正确的邮箱格式">
    </div>
  </div>
  <div class="form-group">
    <label for="password" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="password" name="password" placeholder="密码">
    </div>
  </div>
  <div class="form-group">
    <label for="repassword" class="col-sm-2 control-label">重复密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="repassword" name="repassword" placeholder="与密码相同">
    </div>
  </div>
  
  <div class="form-group">
    <label for="gender" class="col-sm-2 control-label">性别</label>
    <div class="col-sm-10">
      <div class="radio">
        <label>
          <input type="radio" name="gender" value="1">男
        </label>
        <label>
          <input type="radio" name="gender" value="2">女
        </label>
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="birthday" class="col-sm-2 control-label">出生日期</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="birthday" name="birthday" placeholder="格式：1989/12/05">
    </div>
  </div>

  <div class="form-group">
    <label for="work-year" class="col-sm-2 control-label">工作年限</label>
    <div class="col-sm-10">
      <input type="number" class="form-control" id="work-year" name="work-year" placeholder="1~50正整数">
    </div>
  </div>

  <div class="form-group">
    <label for="left-eye" class="col-sm-2 control-label">左眼视力</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="left-eye" name="left-eye" placeholder="4.0~5.3，一位小数">
    </div>
  </div>

  <div class="form-group">
    <label for="right-eye" class="col-sm-2 control-label">右眼视力</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="right-eye" name="right-eye" placeholder="4.0~5.3，一位小数">
    </div>
  </div>

  <div class="form-group">
    <label for="education" class="col-sm-2 control-label">学历</label>
    <div class="col-sm-10">
      <select name="education" id="education" class="form-control">
      	<option value="0">请选择一项...</option>
      	<option value="1">小学</option>
      	<option value="2">初中</option>
      	<option value="3">高中</option>
      	<option value="4">中专</option>
      	<option value="5">大专</option>
      	<option value="6">大学本科</option>
      	<option value="7">硕士研究生</option>
      	<option value="8">博士</option>
      	<option value="9">博士后</option>
      </select>
    </div>
  </div>

  <div class="form-group">
  	<label for="habbit" class="col-sm-2 control-label">兴趣爱好</label>
    <div class=" col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox" name="habbit[]" class="habbit" value="1">球类运动
        </label>
        <label>
          <input type="checkbox" name="habbit[]" class="habbit" value="2">跑步
        </label>
        <label>
          <input type="checkbox" name="habbit[]" class="habbit" value="3">爬山
        </label>
        <label>
          <input type="checkbox" name="habbit[]" class="habbit" value="4">旅游
        </label>
        <label>
          <input type="checkbox" name="habbit[]" class="habbit" value="5">唱歌
        </label>
        <label>
          <input type="checkbox" name="habbit[]" class="habbit" value="5">跳舞
        </label>
        <label>
          <input type="checkbox" name="habbit[]" class="habbit" value="5">乐器
        </label>
        <label>
          <input type="checkbox" name="habbit[]" class="habbit" value="5">看书
        </label>
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="laguage" class="col-sm-2 control-label">掌握语言</label>
    <div class="col-sm-10">
      <select name="laguage[]" id="laguage" class="form-control" multiple size="8">
      	<option value="1">汉语普通话</option>
      	<option value="2">汉语广东话</option>
      	<option value="3">汉语闽南话</option>
      	<option value="4">英语</option>
      	<option value="5">日语</option>
      	<option value="6">韩语</option>
      	<option value="7">法语</option>
      	<option value="8">俄语</option>
      </select>
    </div>
  </div>

  <div class="form-group">
    <label for="website" class="col-sm-2 control-label">个人网站</label>
    <div class="col-sm-10">
      <input type="url" class="form-control" id="website" name="website" placeholder="个人网站">
    </div>
  </div>

  <div class="form-group">
    <label for="introduce" class="col-sm-2 control-label">自我评价</label>
    <div class="col-sm-10">
      <textarea id="introduce" name="introduce" style="width: 100%;min-height: 150px" placeholder="50~200字"></textarea>
    </div>
  </div>

  <div class="form-group other-group">
    <label for="other1" class="col-sm-2 control-label">额外信息1</label>
    <div class="col-sm-8">
      <input type="text" class="form-control other" name="other1" placeholder="额外信息1">
    </div>
    <div class="col-sm-2">
    	<a class="form-control btn btn-default add-other">添加一项</a>
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox" name="agree" value="1">同意用户协议
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">提交</button>
    </div>
  </div>
</form>
		</div>
	</div>
	<script type="text/javascript" src="XValidate.js"></script>
	<script type="text/javascript">
	var HTML = $('.other-group').prop('outerHTML');
	$('form').on('click', '.add-other', function(e) {
		var $old = $(this).closest('.form-group');
		$old.after(HTML);
	});

$.XValidate.addMethod('test', function($elem) {
	return /^\w{6,20}$/.test($elem.val());
}, '不符合自定义规则');

$.XValidate.addClassRule(
	'.habbit',
	{
		checked: true,
		checkedNumberMin: 4,
		checkedInclude: [1],
	},
	{
		checked: 'addRule必须选',
		checkedNumberMin: 'addRule选择数量',
		checkedInclude: 'addRule必须选择第一项：球类运动'
	}
);

$.XValidate.addClassRule(
	'.other',
	{
		notEmpty: true,
		minLength: 4,
		maxLength: 10,
	},
	{
		notEmpty: 'addRule不能为空',
		minLength: 'addRule字符个数最少4',
		maxLength: 'addRule字符个数最多10'
	}
);

$.XValidate.addIdRule(
	'#laguage',
	{
		selected: true,
		selectedNumberMin: 4,
		selectedInclude: [1],
	},
	{
		selected: 'addId必须做出选择',
		selectedNumberMin: 'addId最少选择4项',
		selectedInclude: 'addId必须包含第一项'
	}
);

$.XValidate.addIdRule(
	'#website',
	{
		notEmpty: true,
		pregMatch: /^https?:\/\/.+$/,
	},
	{
		notEmpty: 'addId不能为空',
	}
);


$('#form').XValidate({
	errorClass: 'help-block',
	validateAll: false,
	validateBeforeSubmit: true,
	fail: function($elem, $errorLabel, errorObj) {
		$elem.closest('.form-group').addClass('has-error');
		if ($elem.parent().prop('tagName') === 'LABEL') {
			$elem.closest('div').after($errorLabel);
		} else {
			$elem.after($errorLabel);
		}
		console.log(errorObj);
	},
	success: function($elem) {
		$elem.closest('.form-group').removeClass('has-error');
		if ($elem.parent().prop('tagName') === 'LABEL') {
			$elem.closest('div').next().remove();
		} else {
			$elem.next().remove();
		}
	},
	rules: {
		username: {
			validate: true,//啥时候验证：必须验证
			notEmpty: true,//无空格
			maxLength: 12,
			minLength: 6,
		},
		email: {
			validate: function($item) {
				return true;
			},
			pregMatch: /^\w+@.+/,
		},
		password: {
			test: true,
		},
		repassword: {
			equateTo: '#password',
		},
		gender: {
			checked: true,
		},
		birthday: {
			pregMatch: /^\d{4}\/\d{2}\/\d{2}$/,
		},
		"work-year": {
			integer: true,
			range: [1,50],
		},
		"left-eye": {
			pregMatch: /\d\.\d/,
			min: 4.0,
			max: 5.3,
		},
		"right-eye": {
			pregMatch: /\d\.\d/,
			min: 4.0,
			max: 5.3,
		},
		education: {
			min: 1,
		},
		

		introduce: {
			minLength: 10,
			maxLength: 20
		},
		agree: {
			checked: true,
		},
	},
	messages: {
		username: {
			notEmpty: '不要留空',
			maxLength: '最多12个字符',
			minLength: '最少6个字符',
		},
		email: {
			minLength: '确保邮箱格式正确',
		},
		password: {
			test: '测试自定义规则，不能过也',
		},
		"work-year": {
			integer: '必须是整数',
			range: '范围是1~50',
		},
		education: {
			min: '请选择一项',
		},
		agree: {
			checked: '请同意',
		},
	},
	submitHandler: function($form) {
		alert('验证完毕');
		return false;
	}
});
	</script>
</body>
	
</html>
